<template>
	<view>
		<view @touchmove.stop.prevent="clear"  class="model-container alertcontainers " :class="[visible?'model_show':'model_hidden']">
			<view class="model-contents model-animation" :style="{'transform': 'translateY('+autoheight+'rpx)'}" >
				<view class="close-botton" @click="closetip">×</view>
				<view class="mode-info">
					<slot></slot>
				</view>
			</view>
		</view>
		<!--遮罩层-->
		<view class="model-mask-bgcolor mask-bgcolor model-animation" :class="[visible?'model-bg-show':'model-bg-hidden']"></view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			autoheight:{
				type:[String,Number],
				default:1000,
			}
		},
		
		methods:{
			closetip(){
				uni.$emit('closewindown',false);
			},
			clear(){
				
			}
		}
	}
</script>

<style lang="scss">

	.model-titls{
		font-size: 42rpx;
		font-weight: bold;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		height: 90rpx;
	}
	.model-container,
	.model-mask-bgcolor {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 32rpx;
	}

	//动画开始
	.model-animation {
		transition: all 0.3s ease-in-out;
		transition-timing-function:cubic-bezier(.5,.49,.57,1.41) 
	}

	//背景隐藏
	.mask-bgcolor {
		background-color: #000;
		z-index: 999;
	}

	.model-bg-show {
		visibility: visible;
		opacity: 0.2;
	}

	.model-bg-hidden {
		visibility: hidden;
		opacity: 0;
	}

	.alertcontainers {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		z-index: 9999;
		flex-direction: column;
	}
	//内容框
	.model-contents {
		background-color: #fff;
		width: 92%;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		border: 1rpx solid #F1F1F1;
		border-bottom: none;
		display: flex;
		flex-direction: column;
		padding: 25rpx;
		padding-top:0 ;
		
	}

	.mode-info {
		height: 1000rpx;
		margin: 0 40rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		color: #494949;
	}

	.close-botton {
		height: auto;
		text-align: right;
		font-size: 60rpx;
		font-weight: normal;
		height: 60rpx; 
		color: #c7c7c7; 
		display: flex;
		justify-content: flex-end;
		align-items:flex-start;
	}

	.model_show {
		visibility: visible;
		//transform: translateY(100rpx);
	}

	.model_hidden {
		visibility: hidden;
		//transform: translateY(1000rpx);
	}
</style>
